<template>
	<view class="">
		<!-- 老师推荐 -->

		<view class=" u-relative padding">
			<view class="flex justify-between" @click="jump('/pages/start/teacherRecommendation')">
				<text class="f30 text-bold">老师推荐</text>
				<view class="flex align-center text-gray" >
					<text class="f28">更多</text>
					<p class="cuIcon-right"></p>
				</view>
			</view>

			<view
				class=" w420 h110 bg-img bgimg"
				style="background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210825160017.png);"
			></view>
			<view class="padding-tb flex" v-for="(i, index) in teacherdata" :key="index" @click="teacherDetails(i.id)">
				<image
					:src="img + i.avatar"
					mode="aspectFill"
					@load="showimage = true"
					lazy-load
					class="  w164 h164 r10 bg-gray mr25"
				></image>
				<view class="flex flex-direction justify-around " style="width: 500rpx;">
					<text class="f30 text-bold">{{ i.name }}</text>
					<text class="f24 txtClr hidden ">{{ i.brief }}</text>
					<text class="f24 txtClr hidden">{{ i.service_content }}</text>
				</view>
			</view>
		</view>
		<view class="horzLine"></view>
		<!-- 热门活动 -->
		<view class="" style="padding: 30rpx;">
			<view class="flex justify-between padding-bottom">
				<text class="f30 text-bold">热门活动</text>
				<view class="flex align-center text-gray" @click="jump('/pages/start/activity')">
					<text class="f28">更多</text>
					<p class="cuIcon-right"></p>
				</view>
			</view>

			<view
				class="padding-bottom flex flex-direction"
				v-for="(item, index) in activitydata"
				:key="index"
				
				@click="jumpp(item)"
			>
				<image
					:src="img + item.image"
					mode="aspectFill"
					@load="showimage1 = true"
					lazy-load
					class="  w690 h360 r10 bg-gray "
				></image>
				<view class="flex align-center justify-between mt25">
					<text class="f28 text-bold ">{{ item.title }}</text>
					<view class="sgnUp">{{signingUp(item.start_time ,item.end_time)}}</view>
				</view>
				<view class="flex align-center ">
					<text class="f24 " style="color: #666666;">
						活动时间: {{ item.start_time_text }} 至 {{ item.end_time_text }}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 钱包样式卡片
 */
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	components: {},
	data() {
		return {
			showimage: false,
			showimage1: false,
			teacherdata: [],
			activitydata: [],
			img: 'https://guoxue.qianjiwl.xyz'
		};
	},
	computed: {
		...mapState({
			userInfo: ({ user }) => user.userInfo,
			userData: ({ user }) => user.userData
		})
	},
	onLoad() {
		console.log('1111 :>> ', 1111);
		this.teacher();
	},
	methods: {
		jump(path, query) {
			
			this.$Router.push({
				path: path,
				query: query
			});
		},
		// /teacher/list
		async teacher() {
			console.log('1111 :>> ', 1111);
			let that = this;
			const res = await that.$http('common.eventsLst', { page: 1 });
			this.teacherdata = res.data.data.slice(0,4);
		},
		async teacherDetails(e) {
			console.log('e :>> ', e);
			// pages/start/expert
			uni.navigateTo({
				url: 'pages/start/expert?id='+e,
			});
		},
		async jumpp(e){
			uni.setStorageSync('content' ,e)
			 uni.navigateTo({
			 	url: '/pages/start/evntDetails',
			 });
		},
		 signingUp(e,e1){
			 console.log('e :>> ', e);
			 console.log('e1 :>> ', e1);
			 console.log('Math.round(new Date() / 1000) :>> ', Math.round(new Date() / 1000));
			 var time = Math.round(new Date() / 1000)
			 if (e < time &&  time <  e1 ) {
			 	return '活动中'
			 }
			 if (time < e  ) {
			 	return '报名中'
			 }
			 if (time > e1  ) {
			 	return '已结束'
			 }
		},
		async activity() {
			let that = this;
			const res = await that.$http('common.activity', { page: 1, limit: 10 });
			
			this.activitydata = res.data.slice(0,3);
			console.log('res11 :>> ', res);
			
		}
	}
};
</script>

<style lang="scss">
// 钱包卡片
.txtClr {
	color: #4d4d4d;
}
.horzLine {
	width: 750rpx;
	height: 20rpx;
	background: #f0f0f0;
}
.sgnUp {
	padding: 13rpx 19rpx;
	border: 2rpx solid #d76363;
	border-radius: 4rpx;
	font-size: 26rpx;
	font-weight: 500;
	color: #d76363;
}
.bgimg {
	position: absolute;
	top: 50rpx;
	right: 0;
}
</style>
